import React, { useEffect, useState } from 'react'
import { PageHeader, Descriptions } from 'antd';
import moment from 'moment';
import { getPageforId } from '../../../api/Article-manageApi'

export default function NewsPreview(props) {
    const [newsInfo, setnewsInfo] = useState(null)
    useEffect(() => { 
        getPageforId({
            pageId: props.match.params.id
        }).then(res => {
            let data = res.queryPageList.records[0]
            setnewsInfo(data)
        })
    }, [props.match.params.id])
    // 审核状态转换
    const auditList = ["未审核", '已通过', '未通过']
    // 发布状态转换
    const publishList = ["未发布", '已发布', '待发布', '草稿','已下线']
    const colorList = ["black","orange","green",'blue',"red"]
    return (
        <div>
            {
                newsInfo && <div>
                    <PageHeader
                        onBack={() => window.history.back()}
                        title={newsInfo.title}
                        subTitle={newsInfo.categoryName}
                    >
                        <Descriptions size="small" column={3}>
                            <Descriptions.Item label="创建者">
                                {newsInfo.author}</Descriptions.Item>
                            <Descriptions.Item label="创建时间">
                                {moment(newsInfo.createTime).format("YYYY/MM/DD HH:mm:ss")}
                            </Descriptions.Item>
                            <Descriptions.Item label="发布时间">{
                                newsInfo.publishTime ?
                                    moment(newsInfo.publishTime).format("YYYY/MM/DD HH:mm:ss") : "-"
                            }</Descriptions.Item>
                            <Descriptions.Item label="区域">{newsInfo.region}</Descriptions.Item>
                            <Descriptions.Item label="审核状态" >
                                <span style={{ color: colorList[newsInfo.auditState] }}>{auditList[newsInfo.auditState]}</span>
                            </Descriptions.Item>
                            <Descriptions.Item label="发布状态" >
                                <span style={{ color: colorList[newsInfo.publishState] }}>{publishList[newsInfo.publishState]}</span>
                            </Descriptions.Item>
                            <Descriptions.Item label="访问数量">
                                <span style={{ color: "green" }}>{newsInfo.view}</span>
                            </Descriptions.Item>
                            <Descriptions.Item label="点赞数量">
                                <span style={{ color: "green" }}>{newsInfo.star}</span>
                            </Descriptions.Item>
                            <Descriptions.Item label="评论数量">
                                <span style={{ color: "green" }}>0</span>
                            </Descriptions.Item>
                        </Descriptions>
                    </PageHeader>
                    {/* 内容区域 */}
                    <div dangerouslySetInnerHTML={{
                        __html:newsInfo.content
                    }} style={{
                        margin: "0 24px",
                        padding:'10px',
                        border:"1px solid rgb(199 196 196)"
                    }}>
                    </div>
                </div>
            }
        </div>
    )
}
